<template>
  <div>
    <!-- 第一个板块 -->
    <div class="box1">
      <!-- 左边文字内容 -->
      <div class="zuobian">
        <!-- 标题 -->
        <div class="biaoti">{{ text.companyName }}</div>
        <!-- 内容 -->
        <div class="neirong">{{ text.companyDesc }}</div>
        <!-- 按钮 -->
        <div class="anniu">
          <!-- 左边按钮 -->
          <div class="anniu01">{{ anniu01 }}</div>
          <!-- 右边按钮 -->
          <div class="anniu02">{{ anniu02 }}</div>
        </div>
      </div>
      <!-- 右边图片 -->
      <div class="youbian">
        <!--背景圆形 -->
        <div class="yuan">
          <img :src="text.Iamge" alt="" class="img03" />
        </div>
      </div>
    </div>

    <!-- 第二个板块，我们的项目服务 -->
    <div class="fuwu">
      <!-- 文字部分 -->
      <div class="wenzi">
        <div class="fuwu01">{{ text02.services }}</div>
        <div class="fuwu02">{{ text02.serviceTitle }}</div>
        <div class="fuwu03">{{ text02.serviceDesc }}</div>
      </div>
      <!-- 四个板块部分 -->
      <div class="sige">
        <div class="sige01" v-for="item in list" :key="item.id">
          <!-- 图片 -->
          <div class="sigeimg">
            <img :src="item.img" alt="" class="sigeimg01" />
          </div>
          <!-- 文字 -->
          <div class="sigewenzi01">{{ item.name }}</div>
          <div class="sigewenzi02">{{ item.Desc1 }}</div>
          <div class="sigewenzi02">{{ item.Desc2 }}</div>
        </div>
      </div>
    </div>

    <!-- 第三个板块,我们的团队 -->
    <div class="women">
      <!-- 左边的图片 -->
      <div class="womenimg">
        <img :src="about.image" alt="" class="womenimg01" />
      </div>
      <!-- 右边的文字按钮 -->
      <div class="womenwenzi">
        <div class="womenwenzi01">{{ about.aboutUs }}</div>
        <div class="womenwenzi02">{{ about.sboutUsText }}</div>
        <div class="womenwenzi03">{{ about.aboutUsDesc }}</div>
        <!-- 按钮 -->
        <div class="womenwenzi04">{{ womenwenzi04 }}</div>
      </div>
    </div>

    <!-- 第四个板块，我们的优秀成员 -->
    <div class="chengyuan">
      <!-- 上面的文字内容 -->
      <div class="chengyuanwenzi">
        <div class="chengyuanwenzi01">{{ number.EnglishText }}</div>
        <div class="chengyuanwenzi02">{{ number.excellentNumbers }}</div>
        <div class="chengyuanwenzi03">{{ number.Desc }}</div>
      </div>
      <!-- 下面的四个板块 -->
      <div class="chengyuanbankuai">
        <div class="chengyuanbankuai01" v-for="item in list01" :key="item.id">
          <!-- 人物图片 -->
          <div class="chengyuanbankuai0101">
            <img :src="item.image" alt="" class="chengyuanbankuai0101img" />
          </div>
          <!-- 名片框 -->
          <div class="chengyuanbankuai0102">
            <div class="cybk01">{{ item.numberName }}</div>
            <div class="cybk02">{{ item.department }}</div>
            <p class="numberDesc">{{ item.desc1 }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      text: "",
      anniu01: "开始项目",
      anniu02: "了解更多",
      text02: "",
      list: "",
      about: "",
      womenwenzi04: "More About Us",
      number: "",
      list01: "",
    };
  },
  created() {
    this.createData();
  },
  methods: {
    //  页面数据获取
    async createData() {
      // axios({
      //   method: "get",
      //   url: "json/home.json",
      // }).then((res) => {
      //   this.text = res.data.companyIntroduce;
      //   this.text02 = res.data.companyServices;
      //   this.list = res.data.companyServices.servicesProject;
      //   this.about = res.data.aboutUs;
      //   this.number = res.data.excellentNumber;
      //   this.list01 = res.data.excellentNumber.numbersIntroduce;
      // });

      const { data: res } = await this.$axios.get(
        "/OfficialWebsite/getPageOfHome"
      );
      if (res.code === 200) {
        console.log(res);
        this.text = res.data.companyIntroduce;
        this.text02 = res.data.companyServices;
        this.about = res.data.aboutUs;
        this.number = res.data.excellentNumber;
        this.list = res.data.companyServices.servicesProject;
        this.list01 = res.data.excellentNumber.numbersIntroduce;
      } else {
        return false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/* 第一个板块的样式 */
/* 第一个板块盒子 */
.box1 {
  width: 100%;
  height: 891px;
  /* background-color: aqua; */
  display: flex;
}
/* 右边的蓝色圆形 */
.yuan {
  width: 500px;
  height: 500px;
  background-color: #1694e8;
  border-radius: 700px;
  margin: auto;
  /* line-height: 891px; */
  margin-top: 195.5px;
}
/* 左边的内容 */
.zuobian {
  width: 50%;
  height: 891px;
  text-align: center;
  padding: 50px;
  padding-top: 250px;
  box-sizing: border-box;
}
/* 右边的内容 */
.youbian {
  width: 50%;
  height: 891px;
}
/* 左边的标题 */
.biaoti {
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 30px;
}
/* 左边的文字介绍内容 */
.neirong {
  text-indent: 2em;
  margin-bottom: 50px;
}
/* 下面的两个按钮 */
.anniu {
  width: 100%;
  height: 100px;
  /* background-color: red; */
  display: flex;
}
/* 按钮一，开始项目 */
.anniu01 {
  width: 35%;
  height: 50px;
  background-color: #1694e8;
  margin-top: 25px;
  border-radius: 10px;
  margin-left: 10%;
  font-size: 18px;
  color: white;
  line-height: 50px;
  transition: 0.5s;
  cursor: pointer;
}
.anniu01:hover {
  width: 40%;
  margin-left: 7.5%;
  background-color: white;
  border: #1694e8 1px solid;
  color: #1694e8;
  /* height: 60px; */
}
.anniu01:hover + .anniu02 {
  margin-left: 7.5%;
  /* height: 60px; */
}
/* 按钮二，了解更多 */
.anniu02 {
  width: 35%;
  height: 50px;
  /* background-color: #1694E8; */
  margin-top: 25px;
  border-radius: 10px;
  margin-left: 10%;
  border: #1694e8 1px solid;
  font-size: 18px;
  color: #1694e8;
  line-height: 50px;
  transition: 00.5s;
  cursor: pointer;
}
.anniu02:hover {
  width: 40%;
  margin-left: 7.5%;
  background-color: #1694e8;
  color: white;
  /* height: 60px; */
}
/* 右边的小圆形上的小人 */
.img03 {
  width: 100%;
}

/* 第二个板块，我们的项目服务 */
/* 第二个板块的大盒子 */
.fuwu {
  width: 100%;
  height: 848px;
  background-color: #f5fbff;
}
/* 上面的文字部分 */
.wenzi {
  width: 100%;
  height: 424px;
  /* background-color: #1694E8; */
  text-align: center;
  box-sizing: border-box;
  padding-top: 115px;
}
/* 第一段文字 */
.fuwu01 {
  font-weight: 600;
  font-size: 20px;
  /* margin-top: 50px; */
}
/* 第二段文字 */
.fuwu02 {
  font-size: 48px;
  font-weight: 700;
  margin-top: 35px;
}
/* 第三段文字 */
.fuwu03 {
  font-size: 16px;
  font-weight: 400;
  margin-top: 35px;
}
/* 下面四个板块的大盒子 */
.sige {
  width: 100%;
  height: 424px;
  display: flex;
  margin: 0 20px;
  justify-content: center;
}
/* 四个小白盒子样式 */
.sige01 {
  width: 16.5625rem;
  height: 320px;
  background-color: white;
  margin-right: 10px;
  margin-top: 50px;
  text-align: center;
}
/* 装图片的盒子 */
.sigeimg {
  width: 100px;
  height: 100px;
  border-radius: 100px;
  background-color: #f5fbff;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 10px;
}
/* 下面的第一段文字 */
.sigewenzi01 {
  font-weight: 700;
  font-size: 32px;
}
/* 下面的第二段文字 */
.sigewenzi02 {
  font-weight: 400;
  font-size: 14px;
  margin-top: 15px;
}
/* 四个图片的样式 */
.sigeimg01 {
  width: 100%;
}
/* 第三个板块的样式 */
/* 第三个板块的大盒子 */
.women {
  width: 100%;
  height: 851px;
  /* background-color: #1694e8; */
  display: flex;
}
/* 装左边图片的盒子 */
.womenimg {
  width: 500px;
  height: 500px;
  border-radius: 500px;
  background-color: #f5fbff;
  margin-top: 175.5px;
  margin-left: 50px;
  margin-right: 50px;
}
/* 右边的文字部分大盒子 */
.womenwenzi {
  height: 851px;
  width: 50%;
  /* background-color:aquamarine; */
  /* text-align: center; */
}
/* 第一段文字 */
.womenwenzi01 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 230px;
  margin-left: 20px;
}
/* 第二段文字 */
.womenwenzi02 {
  font-size: 48px;
  font-weight: 700;
  margin-top: 30px;
  margin-left: 20px;
}
/* 第三段文字 */
.womenwenzi03 {
  font-size: 16px;
  font-weight: 400;
  margin-top: 50px;
  text-indent: 2em;
  margin-left: 20px;
}
/* 按钮文字 */
.womenwenzi04 {
  width: 200px;
  height: 53px;
  margin-left: 20px;
  background-color: #1694e8;
  margin-top: 50px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  color: white;
  line-height: 53px;
  cursor: pointer;
  transition: 0.5s;
}
.womenwenzi04:hover {
  width: 180px;
}
/* 图片的样式 */
.womenimg01 {
  width: 100%;
  border-radius: 100%;
}

/* 第四个板块，关于我们 */
.chengyuan {
  width: 100%;
  height: 970px;
  background-color: #f5fbff;
}
.chengyuanwenzi {
  width: 100%;
  height: 388px;
  /* background-color: #1694e8; */
  text-align: center;
  padding: 50px;
  padding-top: 100px;
  box-sizing: border-box;
}
.chengyuanwenzi01 {
  font-weight: 600;
  font-size: 20px;
  /* margin-top: 1000px; */
}
.chengyuanwenzi02 {
  font-weight: 700;
  font-size: 48px;
  margin-top: 30px;
}
.chengyuanwenzi03 {
  width: 50%;
  font-weight: 400;
  font-size: 16px;
  margin: auto;
  margin-top: 50px;
}
.chengyuanbankuai {
  width: 100%;
  height: 60%;
  // background-color: #1694e8;
  display: flex;
  justify-content: center;
}
.chengyuanbankuai01 {
  height: 80%;
  width: 280px;
  // background-color: rgb(224, 0, 0);
  margin-top: 58.2px;
  margin-left: 10px;
  margin-left: calc(20% - 224px);
  // margin-left: min(0px);
  // margin-left: clamp(60px, 20% - 212px, 50px);
  position: relative;
  box-sizing: border-box;
  flex-shrink: 0;
}
.chengyuanbankuai0101 {
  height: 80%;
  width: 265px;
  background-color: red;
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  margin: auto;
  /* position: relative; */
}
.chengyuanbankuai0101img {
  width: 265px;
  height: 100%;
  border-radius: 10px;
  /* overflow: hidden; */
  /* margin: auto; */
  /* position: absolute; */
  /* left: -50%; */
}
.chengyuanbankuai0102 {
  height: 30%;
  width: 238.5px;
  background-color: white;
  position: absolute;
  bottom: 10%;
  left: 20.75px;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  z-index: 1;
  box-shadow: 0 0 15px rgb(204, 204, 204);
  // margin: auto;
}
.cybk01 {
  font-weight: 700;
  font-size: 20px;
  text-align: center;
}
.cybk02 {
  margin-top: 10px;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
}
// 优秀成员描述
.numberDesc {
  margin-top: 5px;
  font-size: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
